<%@ page import="java.util.List" %>
<%@ page import="com.online_video.entity.Video" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    User user = (User) session.getAttribute("user");
    System.out.println(user);
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/history.css">

</head>
<body>
<!--导航条-->
<%@include file="plugins/navbar.jsp" %>

<div class="container" style="margin-top: 60px;">
    <div class="page-header">
        <h1>播放历史记录 <small>Video History</small></h1>
    </div>

    <div class="col-md-12">
        <span class="col-lg-2 label label-default">顺序</span>
        <span class="col-lg-8 label label-primary">内容</span>
        <span class="col-lg-2 label label-success">操作</span>
    </div>

    <div class="col-md-12">
        <table class="table table-striped">
            <tbody class="video-history">
        <%--    <tr>
                    <td class="col-lg-2 dateDiv" style="text-align: center;">
                        <h4>2022-2-12</h4>
                    </td>

                    <td class="col-lg-8">
                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="../webImg/bg.jpeg"
                                         data-holder-rendered="true"
                                         style="width: 64px; height: 64px;">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">喜喜喜喜喜喜</h4>
                                <div class="centerFontPos">
                                    <h5>观看时长：2</h5>
                                    <h5>up主：郑厚文</h5>
                                    <h5>类型：技术</h5>
                                </div>
                            </div>
                        </div>
                    </td>


                    <td class="col-lg-2">
                        <a href="#"><img class="delImg" data-src="holder.js/64x64" alt="64x64" src="../webImg/删除.png"></a>
                    </td>
            </tr>--%>


            </tbody>
        </table>
    </div>


</div>
<script type="text/javascript" src="../js/jquery-1.9.min.js"></script>
<script type="text/javascript">
    $.ajax({
        async:true,
        method:"POST",
        dataType:"text",
        url:"./history.do?action=showHistory",
        success:function (data){
            var videos = JSON.parse(data);
            for (var i = 0; i <videos.length; i++) {
                var video = videos[i];
                $('.video-history').append(
                    ` <tr>`+
                    `    <input type="hidden" value="`+video.u_id+`">`+
                    `    <td class="col-lg-2 dateDiv" style="text-align: center">`+
                    `      <h4>`+(i+1)+`</h4>`+
                    `    </td>`+
                    `    <td class="col-lg-8">`+
                    `      <div class="media">`+
                    `              <div class="media-left">`+
                    `                   <a href="./v.jsp?vid=`+video.vid+`">`+
                    `                         <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="/online_video/img/`+video.img+`"
                                                  data-holder-rendered="true"
                                                  style="width: 64px; height: 64px;">`+
                    `                  </a>`+
                    `             </div>`+
                    `         <div class="media-body">`+
                    `             <h4 class="media-heading">`+video.viName+`</h4>`+
                    `                  <div class="centerFontPos">`+
                    `                      <h5>`+queryUser(video.u_id).nickname+`</h5>`+
                    `                      <h5>`+video.category+`</h5>`+
                    `                   </div>`+
                    `          </div>`+
                    `      </div>`+
                    `    </td>`+
                    `   <td class="col-lg-2">`+
                    `         <a methods="post" href="./history.do?action=delete&vid=`+video.vid+`">`+
                    `              <img class="delImg" data-src="holder.js/64x64" alt="64x64" src="../webImg/删除.png">`+
                    `        </a>`+
                    `   </td>`+
                    ` </tr>`);
                // var s = queryUser(video.u_id);
                // console.log(s);
            }
        }
    })

</script>
<%--根据u_id进行数据的查询--%>
<%--将ajax中的值传出 1 需要把async 设置为 flase --%>
<script type="text/javascript">
    function queryUser(u_id){
        var user = "";
        $.ajax({
            async:false,
            dataType:"text",
            method:"POST",
            url: "./user.do?",
            data: {
                action:"queryByU_Id",
                u_id:u_id,
            },success:(data)=>{
                if (data!=null&&""!=data){
                   user = JSON.parse(data);
                }
            }
        })
        return user;
    }

</script>

</body>
</html>
